<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/use'

defineProps<{ msg: string }>()

const store = useStore()

const { count, doubleCount, getUserById, otherGetter } = storeToRefs(store)

function onClick() {
  store.count++
  // store.$patch({
  //   msg: 'count1: ' + count.value
  // })
  // store.$state = { msg: 'count2: ' + count.value }
  store.changeMsg('count3: ' + count.value)
}
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>User 2: {{ getUserById(2) }}</p>
    <button type="button" @click="onClick">count is: {{ count }}</button>
    <p>Double count is {{ doubleCount }}</p>
    <p>{{ store.hello }}</p>
  </div>
</template>
